<template>
  <div
    :style="bg"
    class="content p-rel"
  >
    <login-modal
      class="resize"
      :titleText='$t("register")||"注册"'
    >
      <el-form
        :model='registerData'
        label-position='top'
        @submit.native.prevent
      >
        <el-form-item :label='$t("label154")'>
          <el-input
            autocomplete='off'
            v-model.trim="registerData.account"
            :placeholder='$t("label158")'
            @blur="validate(registerData.account,'account')"
          >
          </el-input>
        </el-form-item>
        <!-- 验证码类型 -->
        <el-form-item :label='$t("label160")'>
          <el-radio-group
            :disabled='canGetCode?false:true'
            v-model="registerData.type"
          >
            <el-radio label="1">{{$t('mobileCode')}}</el-radio>
            <el-radio label='2'>{{$t('label161')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-show="registerData.type=='1'"
          :label='$t("cellphone")||"手机号"' 
        >
        <div class="flex">
          <el-select v-model="areacode"  placeholder="请选择" style="width:140px" >
            <el-option
              v-for="(item,index) in phoneareaid"
              :key="index"
              :label="item.areaid+item.country"
              :value="item.areaid">
            </el-option>
          </el-select>
          <el-input
            autocomplete='off'
            v-model.trim="registerData.accountCode"
            :placeholder='$t("mobilePlaceholder")||"请输入手机号"'
            maxlength='11'
            @blur="validate(registerData.accountCode,'accountCode')"
          >
          </el-input>
        </div>
          
        </el-form-item>
        <el-form-item
          v-show="registerData.type=='2'"
          :label='$t("email")||"邮箱"'
        >
          <el-input
            autocomplete='off'
            v-model.trim="registerData.accountCode"
            :placeholder='$t("emailPlaceholder")||"请输入邮箱"'
            @blur="validate(registerData.accountCode,'accountCode')"
          >
          </el-input>
        </el-form-item>
        <!-- 发送验证码 -->
        <el-form-item :label='registerData.type=="1"?$t("mobileCode"):$t("label161")'>
          <div class="mobile-code-wrap p-rel">
            <el-input
              autocomplete='off'
              v-model="registerData.formCode"
              :placeholder='myCode?registerData.type=="1"?$t("mobileCodePlaceholder"):$t("emailCodePlaceholder"):$t("label170")'
              :disabled="!myCode"
            >
            </el-input>
            <div
              @click='sendCode'
              class="mobile-code abs-v-center color-dsend"
            >{{$t(this.codeTexti18n)}}{{second}}
            </div>
          </div>
        </el-form-item>
        <el-form-item :label='$t("loginPwd")||"登录密码"'>
          <el-input
            autocomplete='off'
            v-model="registerData.password"
            type='password'
            :placeholder='$t("pwdPlaceholder")||"请输入密码"'
            @blur="validate(registerData.password,'password')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label='$t("loginRepass")||"确认登录密码"'>
          <el-input
            autocomplete='off'
            v-model="registerData.repassword"
            type='password'
            :placeholder='$t("pwdPlaceholder")||"请再次输入密码"'
            @blur="validate(registerData.repassword,'repassword')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label='$t("imgCode")||"图形验证码"'>
          <div class="code-wrap flex flex-between">
            <el-input
              autocomplete='off'
              v-model="registerData.verCode"
              :placeholder='$t("imgCodePlaceholder")||"请输入图形验证码"'
              @blur="validate(registerData.verCode,'verCode')"
            >
            </el-input>
            <div
              class="code"
              @click="createCode(verCodeNumArr,4)"
            >
              <ver-code
                :contentHeight='38'
                :identifyCode='verCodeStr'
              >
              </ver-code>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label='$t("recommender")||"邀请人（选填）"'>
          <el-input
            autocomplete='off'
            v-model="parentCode"
            :placeholder='$t("recommenderPlaceholder")||"请输入邀请人账号"'
          >
          </el-input>
        </el-form-item>
        <div
          :class="isAgreed?'active':''"
          class="agree flex flex-between"
        >
          <div>
            <i class="el-icon-circle-check"></i>
            <template v-if="$i18n.locale=='zh-CN'">
              <span>我已阅读并同意</span>
              <router-link to='/help_center/privacy' target="_blank">《用户使用协议》</router-link>
            </template>
            <template v-if="$i18n.locale=='en-US'">
              <span>I've read and agreed with the</span>
              <router-link to='/help_center/privacy' target="_blank">'User agreement'</router-link>
            </template>
          </div>
          <router-link
            class="back"
            to='/user/login'
            v-text="$t('backToLogin')||'返回登录'"
          >
          </router-link>
        </div>
        <el-form-item>
          <button
            @click="formSubmit"
            class="btn-block btn-large btn-gold btn-active"
            v-text="$t('register')||'注册'"
          >
          </button>
        </el-form-item>
      </el-form>
    </login-modal>
  </div>
</template>
<script>
import loginModal from "@/components/Login/LoginModal.vue";
import verCode from "@/components/other/verCode";
export default {
  components: { loginModal, verCode },
  data() {
    const bg = require("@/assets/images/user/dl_bj.png");
    return {
      bg: `background-image:url(${bg})`,
      registerData: {
        type: "1",
        account: "",
        accountCode: "",
        password: "",
        repassword: "",
        formCode: "",
        verCode: "",
      },
      parentCode:'',

      myCode: false,
      codeText: "获取验证码",
      codeTexti18n: "getMsgCode",
      second: "",
      canGetCode: true,
      isAgreed: true,
      verCodeStr: "",
      getCodeTimes: 0,
      verCodeNumArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      canSubmit: false,
      IPS:"",
      areacode:'',
      phoneareaid:[]
    };
  },
  created() {
    //页面加载
    this.getareacode();
  },
  mounted() {
    this.createCode(this.verCodeNumArr, 4);
    this.userModel.isLogin && this.navigateTo("/");
    // 获取推荐码
    // this.registerData.recommender = this.$route.params.regCode;
    this.parentCode=this.$route.query.rid
    console.log(this.parentCode);
    
  },
  methods: {
    validate(val, name) {
      if (val == "") return;
      this.canSubmit = true;
      switch (name) {
        case "account":
          if (!this.Util.isUserName(val)) {
            this.errMsg("label159");
            this.canSubmit = false;
          }
          break;
        case "accountCode":
          if (!this.Util.isPhone(val) && !this.Util.isEmail(val)) {
            this.errMsg("label156");
            this.canSubmit = false;
          }
          break;
        case "password":
          if (!this.Util.isPassword(val)) {
            this.errMsg("label124");
            this.canSubmit = false;
          }
          break;
        case "repassword":
          if (val != this.registerData.password) {
            this.errMsg("两次输入密码不一致");
            this.canSubmit = false;
          }
          break;
        case "verCode":
          if (val != this.verCodeStr) {
            this.errMsg("label126");
            this.canSubmit = false;
          }
          break;
      }
    },
    createCode(arr, len) {
      let str = "";
      for (let i = 0; i < len; i++) {
        str += this.verCodeNumArr[
          this.Util.randomNum(0, this.verCodeNumArr.length)
        ];
      }
      this.verCodeStr = str;
    },
    // 倒计时函数
    countDown() {
      this.timer = this.Util.timerCounter({
        onStart: t => {
          this.canGetCode = false;
          this.getCodeTimes += 1;
          this.second = `${t}s`;
          this.codeTexti18n = "countDown";
        },
        onCounting: t => {
          this.second = `(${t}s)`;
          this.codeTexti18n = "countDown";
        },
        onComplete: () => {
          this.canGetCode = true;
          if (this.getCodeTimes > 0) {
            this.codeTexti18n = "tryAgain";
            this.second = "";
          }
        }
      });
    },
    sendCode() {
      if (!this.canGetCode) return false;
      if (this.registerData.type == "1") {
        if(this.areacode==''){
          this.errMsg('请选择区号并填入手机号' || "选择区号");
          this.myCode = false;
          return
        }
        // this.areacode='86'
        // 手机验证码
        if (!this.Util.isPhone(this.registerData.accountCode)) return false;
        this.request(this.api.getcode, {
          token: this.registerData.accountCode,
          type:'1',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode
        }).then(res => {
          if (res.code == "0") {
            this.myCode = true;
            this.successMsg(res.msg || "发送成功");
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
      } else {
        //邮箱验证码
        if (!this.Util.isEmail(this.registerData.accountCode)) return false;
        this.areacode=0;
        this.request(this.api.getcode, {
          token: this.registerData.accountCode,
          type:'2',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode
        }).then(res => {
          if (res.code == "0") {
            this.successMsg(res.msg || "发送成功");
            this.myCode = true;
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
      }
      this.countDown();
    },

    formSubmit() {
      console.log(this.registerData);
      if (!this.Util.isUserName(this.registerData.account)) {
            this.errMsg("label159");
            this.canSubmit = false;
            return
      }
      for (let key in this.registerData) {
        let item = this.registerData[key];
        if (item == "" ||item==null) {
          // this.errMsg("请填写完整信息后提交");
          this.$notify.error({
              title: '错误',
              message: '请填写完整信息后提交'
          });
          return;
        }
      }
      if (!this.canSubmit) return;
      let postData = {
        type: this.registerData.type,
        member: this.registerData.account,
        account: this.registerData.accountCode,
        loginpassword: this.registerData.password,
        code: this.registerData.formCode,
        showLoading: true,
        parent: this.parentCode || null,
        areacode:this.areacode,
      };
      //注册验证的接口
      this.request(this.api.register, postData).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          this.navigateTo("/user/login");
        } else {
          this.errMsg(res.msg || "注册失败");
        }
      });
    },
    // 区号
    getareacode() {
      this.request(this.api.getareacode,{lang:'1'}).then(res => {
        if(res.code == '0') {
          this.phoneareaid = res.data;
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.content {
  padding: 1px;
  min-height: calc(100% - 294px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  .resize {
    margin: 35px auto;
  }
  .agree {
    margin-top: -10px;
    margin-bottom: 20px;
    color: #999;
    &.active {
      color: $color-danger;
    }
    .back {
      color:#677ee8;
    }
    div:first-child {
      cursor: pointer;
    }
  }
}
.go-reg {
  // color: #b72026;
  color: #677ee8;
}

.el-form-item {
  margin-bottom: 15px;
  button {
    margin-top: 1px;
  }
  .code {
    width: 95px;
    border: $default-border;
    margin-left: 15px;
    height: 40px;
    box-sizing: border-box;
  }
  .mobile-code {
    width: 120px;
    text-align: right;
    right: 15px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
    &.color-danger {
      color: $color-danger;
    }
    &.color-dsend {
      color:  #677ee8;
    }
  }
}
</style>